/* 清除默认样式 */
* {
    margin: 0;
    padding: 0;
}

.wrap {
    width: 200px;
    height: 200px;
    margin: 150px auto;
    /* 设置景深 */
    perspective: 3000px;
}

.wrap ul {
    list-style: none;
    width: 100%;
    height: 100%;
    position: relative;
    /* 设置3d背景台 ,让子元素有3D效果*/
    transform-style: preserve-3d;
    /* 测试使用 */
    transform: rotateY(45deg) rotateX(45deg);
    /* 执行动画 */
    animation: donghua 3s linear 0s infinite;
}

.wrap ul li {
    width: 100%;
    height: 100%;
    /* 子绝父相 */
    position: absolute;
    border: 1px solid #000;

}

.wrap ul li:nth-child(1) {
    background: url(../images/01.jpg);
    transform: translateZ(100px);
    background-size: 200px 200px;
}

.wrap ul li:nth-child(2) {
    background: url(../images/02.jpg);
    transform: translateZ(-100px);
    background-size: 200px 200px;
}

.wrap ul li:nth-child(3) {
    background: url(../images/03.jpg);
    transform: translateX(-100px) rotateY(90deg);
    background-size: 200px 200px;
}

.wrap ul li:nth-child(4) {
    background: url(../images/04.jpg);
    transform: translateX(100px) rotateY(90deg);
    background-size: 200px 200px;
}

.wrap ul li:nth-child(5) {
    background: url(../images/05.jpg);
    transform: translateY(-100px) rotateX(90deg);
    background-size: 200px 200px;
}

.wrap ul li:nth-child(6) {
    background: url(../images/06.jpg);
    transform: translateY(100px) rotateX(90deg);
    background-size: 200px 200px;
}

/* 调用动画 */
@keyframes donghua {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}